{% extends 'layout.html' %}
{% load static %}

{# 单独应用css样式#}
{% block css %}
    <link rel="stylesheet" href="{% static 'plugins/bootstrap-datepicker/css/bootstrap-datepicker.min.css' %}">
{% endblock %}

{% block content %}
    <div>
        <div class="container">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
                        新建用户
                    </h3>
                </div>
                <div class="panel-body">
                    <form method="post">
                        {% csrf_token %}
                        <div class="form-group">
                            <label for="exampleInputEmail1">姓名</label>
                            <input type="text" class="form-control" name="user" placeholder="输入姓名">
                        </div>
                        <div class="form-group">
                            <label for="exampleInputEmail1">密码</label>
                            <input type="text" class="form-control" name="pwd" placeholder="输入密码">
                        </div>
                        <div class="form-group">
                            <label for="exampleInputEmail1">年龄</label>
                            <input type="text" class="form-control" name="age" placeholder="输入年龄">
                        </div>
                        <div class="form-group">
                            <label for="exampleInputEmail1">薪资</label>
                            <input type="text" class="form-control" name="sl" placeholder="输入薪资">
                        </div>
                        <div class="form-group">
                            <label>入职时间</label>
                            <input id="dt" type="text" class="form-control" name="ctime" placeholder="入职时间">
                        </div>
                        <div class="form-group">
                            <label for="exampleInputEmail1">性别</label>
                            <select name="gd" class="form-control">
                                {% for items in gender_choice %}
                                    <option value={{ items.0 }}>{{ items.1 }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="form-group">
                            <label>部门</label>
                            <select class="form-control" name="dp" >
                                {% for items in depart_list %}
                                    <option value="{{ items.id }}">{{ items.title}}</option>
                                {% endfor %}
                            </select>
                        </div>

                        <button type="submit" class="btn btn-primary">Submit</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{#引入js样式#}
{% block js %}
    <script src="{% static 'plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js' %}"></script>
    <script src="{% static 'plugins/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js' %}"></script>
    <script>
        $(function() {
            $('#dt').datepicker({
                format : 'yyyy-mm-dd',
                startDate: '0',
                language: 'zh-CN',
                autoclose: true
            })
        })
    </script>
{% endblock %}

